<template>
  <div class="pie">
    <!-- 资产表 -->
    <div id="main1" />
  </div>
</template>

<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  data() {
    return {
      assData: [],
      showData: ['流动资产合计', '固定资产合计', '流动负债合计']
    }
  },
  created() {
    this.queryAssetsData()
  },
  methods: {
    queryAssetsData() {
      queryAssets({}).then(res => {
        if (res.code === 0) {
          res.data.forEach(item => {
            if (this.showData.includes(item.pItemtype)) {
              this.assData.push({
                name: item.pItemtype,
                value: item.pamount
              })
            }
          })
          this.initData()
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    },
    // 初始化数据
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '资产表', // 主标题
          x: '10', // x轴方向对齐方式
          y: '5'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'horizontal',
          bottom: 5
        },
        series: [
          {
            type: 'pie',
            width: 600,
            height: 600,
            left: 'center',
            top: 'center',
            radius: '55%',
            center: ['50%', '45%'],
            data: this.assData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>
<style scoped lang="scss">
.pie {
  width: 100%;
  height: 100%;
  #main1{
    width: 100%;
    height: 100%;
  }
}

</style>
